<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退换货管理 - 管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--secondary-color);
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-success {
            background-color: #2ecc71;
            color: white;
        }

        .btn-danger {
            background-color: #e74c3c;
            color: white;
        }

        .btn-warning {
            background-color: #f39c12;
            color: white;
        }

        .btn i {
            margin-right: 5px;
        }

        .card {
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-title {
            font-weight: 600;
            color: var(--dark-color);
        }

        .card-body {
            padding: 20px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th, .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .table th {
            background-color: #f8f9fa;
            color: var(--dark-color);
            font-weight: 600;
        }

        .table tr:hover {
            background-color: #f8f9fa;
        }

        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .badge-primary {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        .badge-warning {
            background-color: #fff3cd;
            color: #856404;
        }

        .badge-success {
            background-color: #d4edda;
            color: #155724;
        }

        .badge-danger {
            background-color: #f8d7da;
            color: #721c24;
        }

        .badge-info {
            background-color: #e2e3e5;
            color: #383d41;
        }

        .action-btns {
            display: flex;
            gap: 5px;
        }

        .action-btns .btn {
            padding: 5px 10px;
            font-size: 12px;
        }

        .search-box {
            display: flex;
            margin-bottom: 20px;
        }

        .search-box input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
        }

        .search-box button {
            padding: 10px 15px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        .filter-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .filter-tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-weight: 500;
        }

        .filter-tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination a {
            padding: 8px 16px;
            margin: 0 5px;
            border: 1px solid #ddd;
            color: var(--primary-color);
            text-decoration: none;
            border-radius: 4px;
        }

        .pagination a.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .pagination a:hover:not(.active) {
            background-color: #f1f1f1;
        }

        .order-details {
            display: none;
            padding: 15px;
            background-color: #f9f9f9;
            border-top: 1px solid #eee;
        }

        .order-details.show {
            display: block;
        }

        .detail-row {
            display: flex;
            margin-bottom: 10px;
        }

        .detail-label {
            width: 120px;
            font-weight: 500;
            color: #7f8c8d;
        }

        .detail-value {
            flex: 1;
        }

        .product-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .product-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
        }

        .product-info {
            flex: 1;
        }

        .product-name {
            font-weight: 500;
            margin-bottom: 5px;
        }

        .product-sku {
            font-size: 12px;
            color: #95a5a6;
        }

        .product-price {
            width: 100px;
            text-align: right;
            font-weight: 500;
        }

        .status-filter {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .status-btn {
            padding: 6px 12px;
            border-radius: 20px;
            background-color: #f1f1f1;
            border: none;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s;
        }

        .status-btn.active {
            background-color: var(--primary-color);
            color: white;
        }
    </style>
</head>
<body>
<div class="page-header">
    <h1 class="page-title"><i class="bi bi-arrow-left-right"></i> 退换货管理</h1>
    <div>
        <button class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> 新建退换货
        </button>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div class="search-box">
            <input type="text" placeholder="搜索订单号、客户姓名或手机号...">
            <button><i class="bi bi-search"></i> 搜索</button>
        </div>
    </div>
    <div class="card-body">
        <div class="status-filter">
            <button class="status-btn active">全部</button>
            <button class="status-btn">待处理</button>
            <button class="status-btn">处理中</button>
            <button class="status-btn">已完成</button>
            <button class="status-btn">已拒绝</button>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th>退换货单号</th>
                    <th>关联订单</th>
                    <th>客户信息</th>
                    <th>退换货类型</th>
                    <th>申请时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>#RET-2023-1001</td>
                    <td>#ORD-2023-2056</td>
                    <td>张三<br>138****1234</td>
                    <td>退货</td>
                    <td>2023-06-15 14:30</td>
                    <td><span class="badge badge-warning">处理中</span></td>
                    <td class="action-btns">
                        <button class="btn btn-primary btn-sm" onclick="toggleDetails(1)"><i class="bi bi-eye"></i> 查看</button>
                        <button class="btn btn-success btn-sm"><i class="bi bi-check"></i> 通过</button>
                        <button class="btn btn-danger btn-sm"><i class="bi bi-x"></i> 拒绝</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" class="order-details" id="details-1">
                        <div class="detail-row">
                            <div class="detail-label">退换货原因:</div>
                            <div class="detail-value">商品与描述不符，颜色差异较大</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">客户备注:</div>
                            <div class="detail-value">收到的商品颜色与网页展示有明显差异，希望能退货退款</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">商品信息:</div>
                            <div class="detail-value" style="flex: 1;">
                                <div class="product-item">
                                    <img src="https://via.placeholder.com/60" alt="商品图片" class="product-img">
                                    <div class="product-info">
                                        <div class="product-name">男士休闲衬衫 蓝色条纹款</div>
                                        <div class="product-sku">SKU: CS-2023-BLUE</div>
                                    </div>
                                    <div class="product-price">¥299.00</div>
                                </div>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">处理意见:</div>
                            <div class="detail-value">
                                <textarea style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" rows="3" placeholder="请输入处理意见..."></textarea>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>#RET-2023-1002</td>
                    <td>#ORD-2023-1987</td>
                    <td>李四<br>159****4567</td>
                    <td>换货</td>
                    <td>2023-06-14 09:15</td>
                    <td><span class="badge badge-primary">待处理</span></td>
                    <td class="action-btns">
                        <button class="btn btn-primary btn-sm" onclick="toggleDetails(2)"><i class="bi bi-eye"></i> 查看</button>
                        <button class="btn btn-success btn-sm"><i class="bi bi-check"></i> 通过</button>
                        <button class="btn btn-danger btn-sm"><i class="bi bi-x"></i> 拒绝</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" class="order-details" id="details-2">
                        <div class="detail-row">
                            <div class="detail-label">退换货原因:</div>
                            <div class="detail-value">商品质量问题</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">客户备注:</div>
                            <div class="detail-value">收到的耳机有杂音，希望能更换新品</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">商品信息:</div>
                            <div class="detail-value" style="flex: 1;">
                                <div class="product-item">
                                    <img src="https://via.placeholder.com/60" alt="商品图片" class="product-img">
                                    <div class="product-info">
                                        <div class="product-name">无线蓝牙耳机 Pro版</div>
                                        <div class="product-sku">SKU: HP-2023-PRO</div>
                                    </div>
                                    <div class="product-price">¥599.00</div>
                                </div>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">处理意见:</div>
                            <div class="detail-value">
                                <textarea style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" rows="3" placeholder="请输入处理意见..."></textarea>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>#RET-2023-1003</td>
                    <td>#ORD-2023-1876</td>
                    <td>王五<br>186****7890</td>
                    <td>退货</td>
                    <td>2023-06-13 16:45</td>
                    <td><span class="badge badge-success">已完成</span></td>
                    <td class="action-btns">
                        <button class="btn btn-primary btn-sm" onclick="toggleDetails(3)"><i class="bi bi-eye"></i> 查看</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" class="order-details" id="details-3">
                        <div class="detail-row">
                            <div class="detail-label">退换货原因:</div>
                            <div class="detail-value">七天无理由退货</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">客户备注:</div>
                            <div class="detail-value">商品无问题，只是不适合</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">商品信息:</div>
                            <div class="detail-value" style="flex: 1;">
                                <div class="product-item">
                                    <img src="https://via.placeholder.com/60" alt="商品图片" class="product-img">
                                    <div class="product-info">
                                        <div class="product-name">智能手表 GT3</div>
                                        <div class="product-sku">SKU: SW-2023-GT3</div>
                                    </div>
                                    <div class="product-price">¥1,299.00</div>
                                </div>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">处理结果:</div>
                            <div class="detail-value">
                                已同意退货，退款金额 ¥1,299.00 已退回原支付账户
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>#RET-2023-1004</td>
                    <td>#ORD-2023-1765</td>
                    <td>赵六<br>135****2345</td>
                    <td>换货</td>
                    <td>2023-06-12 11:20</td>
                    <td><span class="badge badge-danger">已拒绝</span></td>
                    <td class="action-btns">
                        <button class="btn btn-primary btn-sm" onclick="toggleDetails(4)"><i class="bi bi-eye"></i> 查看</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" class="order-details" id="details-4">
                        <div class="detail-row">
                            <div class="detail-label">退换货原因:</div>
                            <div class="detail-value">商品与描述不符</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">客户备注:</div>
                            <div class="detail-value">收到的鞋子尺码与标注不符</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">商品信息:</div>
                            <div class="detail-value" style="flex: 1;">
                                <div class="product-item">
                                    <img src="https://via.placeholder.com/60" alt="商品图片" class="product-img">
                                    <div class="product-info">
                                        <div class="product-name">男士运动鞋 42码</div>
                                        <div class="product-sku">SKU: SH-2023-42</div>
                                    </div>
                                    <div class="product-price">¥459.00</div>
                                </div>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">拒绝原因:</div>
                            <div class="detail-value">
                                经核实，商品尺码与描述一致，客户测量方式可能有误。已建议客户重新测量并提供测量指导视频。
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>#RET-2023-1005</td>
                    <td>#ORD-2023-1654</td>
                    <td>钱七<br>137****6789</td>
                    <td>退货</td>
                    <td>2023-06-10 18:30</td>
                    <td><span class="badge badge-info">已取消</span></td>
                    <td class="action-btns">
                        <button class="btn btn-primary btn-sm" onclick="toggleDetails(5)"><i class="bi bi-eye"></i> 查看</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="7" class="order-details" id="details-5">
                        <div class="detail-row">
                            <div class="detail-label">退换货原因:</div>
                            <div class="detail-value">七天无理由退货</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">客户备注:</div>
                            <div class="detail-value">商品无问题，只是不适合</div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">商品信息:</div>
                            <div class="detail-value" style="flex: 1;">
                                <div class="product-item">
                                    <img src="https://via.placeholder.com/60" alt="商品图片" class="product-img">
                                    <div class="product-info">
                                        <div class="product-name">无线充电器</div>
                                        <div class="product-sku">SKU: WC-2023-QI</div>
                                    </div>
                                    <div class="product-price">¥199.00</div>
                                </div>
                            </div>
                        </div>
                        <div class="detail-row">
                            <div class="detail-label">处理结果:</div>
                            <div class="detail-value">
                                客户在退货过程中主动取消了退货申请
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="pagination">
            <a href="#">&laquo;</a>
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">&raquo;</a>
        </div>
    </div>
</div>

<script>
    function toggleDetails(id) {
        const details = document.getElementById(`details-${id}`);
        details.classList.toggle('show');
    }

    // 状态筛选按钮点击事件
    document.querySelectorAll('.status-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.status-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            // 这里可以添加筛选逻辑
        });
    });
</script>
</body>
</html>